import React, { useState, useEffect } from 'react'
import styles from './index.module.less'

let player: any

export default function Interview({ data }: any) {
    const { detail = [] } = data || {}

    const [choose, setChoose] = useState<number>(0)
    const [playStatus, setPlayStatus] = useState<any>(null)
    const [loading, setLoading] = useState<string>('')

    useEffect(() => {
        let isLoading = ''
        detail.map((item: any) => {
            if (item?.aliLive?.oss_record_url === '') {
                isLoading = 'wait'
            }
        })
        setLoading(isLoading)
        if (isLoading !== 'wait') {
            if (detail[0]?.aliLive?.oss_record_url !== '') {
                onSetviodeo(detail[0]?.aliLive?.oss_record_url)
            }
        }
    }, [])

    if (!data) {
        return null
    }

    const videoClick = (item: any, index: number) => {
        if (player) {
            // player.dispose()
            // player = null
            setTimeout(() => {
                if (item?.aliLive?.oss_record_url !== '') {
                    player.loadByUrl(item?.aliLive?.oss_record_url, 0)
                }
            }, 500)
        }
        setChoose(index)
    }

    //创建视频播放器
    function onSetviodeo(val: any) {
        let playerClick = new Aliplayer(
            {
                id: 'player-con',
                source: val,
                width: '260px',
                height: '345px',
                autoplay: false,
                isLive: false,
                rePlay: false,
                playsinline: true,
                preload: true,
                controlBarVisibility: 'hover',
                useH5Prism: true,
                skinLayout: [
                    {
                        name: 'bigPlayButton',
                        align: 'cc',
                    },
                    {
                        name: 'H5Loading',
                        align: 'cc',
                    },
                    {
                        name: 'errorDisplay',
                        align: 'tlabs',
                        x: 0,
                        y: 0,
                    },
                    {
                        name: 'thumbnail',
                    },
                    {
                        name: 'controlBar',
                        align: 'blabs',
                        x: 0,
                        y: 0,
                        children: [
                            {
                                name: 'progress',
                                align: 'blabs',
                                x: 0,
                                y: 44,
                            },
                            {
                                name: 'playButton',
                                align: 'tl',
                                x: 15,
                                y: 12,
                            },
                            {
                                name: 'timeDisplay',
                                align: 'tl',
                                x: 10,
                                y: 7,
                            },
                            {
                                name: 'fullScreenButton',
                                align: 'tr',
                                x: 10,
                                y: 12,
                            },
                            {
                                name: 'setting',
                                align: 'tr',
                                x: 15,
                                y: 12,
                            },
                            {
                                name: 'volume',
                                align: 'tr',
                                x: 5,
                                y: 10,
                            },
                        ],
                    },
                ],
            },
            function (item: any) {
                item.on('sourceloaded', function (paramsLoad: any) {
                    let paramData = paramsLoad.paramData
                    let desc = paramData.desc
                    let definition = paramData.definition
                    item.getComponent('QualityComponent').setCurrentQuality(desc, definition)
                })
            },
        )

        playerClick.on('pause', function () {
            setPlayStatus((ps: string) => {
                if (ps === 'ended') {
                    return 'ended'
                } else {
                    return 'pause'
                }
            })
        }) //视频暂停时触发
        playerClick.on('ended', function () {
            console.log('结束')
            setPlayStatus('ended')
        }) //视频播放完毕时触发
        playerClick.on('error', function () {
            console.log('错误')

            setPlayStatus('err')
        }) //视频播放失败
        playerClick.on('ready', function () {
            playerClick.play()
            setPlayStatus(null)
        }) //视频加载完毕
        playerClick.on('timeupdate', function () {
            if (playerClick.getStatus() === 'playing') {
                let getTime = Math.trunc(playerClick.getCurrentTime())
                if (getTime >= 600) {
                    playerClick.seek(600)
                    setPlayStatus('ended')
                }
            }
        }) //视频播放时触发
        player = playerClick
    }

    return (
        <div className={styles.container}>
            <header className={styles.my_result}>{data?.name}</header>
            <div className={styles.my_quetion}>
                <div className={styles.my_quetion_title}>
                    问题（{choose + 1}/{detail.length}）
                </div>
                <div className={styles.my_quetion_answer}>{detail[choose]?.barrierVisionQuestion?.title}</div>
            </div>
            <div className={styles.video_warrper}>
                {loading !== 'wait' ? (
                    <div id="player-con" className={styles.my_interview}>
                        {playStatus !== null && <div className={styles.video_bg}>{playStatus === 'err' && <div className={styles.video_err_bottom}>视频源解码错误</div>}</div>}
                    </div>
                ) : (
                    <div className={styles.my_interview_live}>
                        <div className={styles.my_interview_live_icon} />
                        <div className={styles.my_interview_live_text}>回放生成中，请稍后...</div>
                    </div>
                )}
            </div>
            <div className={styles.video_list}>
                {detail.length > 0 &&
                    detail.map((item: any, index: number) => (
                        <div key={item?.id}>
                            <div className={choose === index ? styles.single_video_active : styles.single_video} onClick={() => videoClick(item, index)}>
                                {index + 1}
                            </div>
                            <div className={styles.choose_warpper}>
                                <div className={choose === index ? styles.single_choose_active : styles.single_choose} />
                            </div>
                        </div>
                    ))}
            </div>
        </div>
    )
}
